昨天介紹完了JSX，今天我們繼續我們的學習，來看看甚麼是Hook吧!

HOOK是甚麼?

Hook的中文翻譯是[鉤子]，顧名思義就是將東西鉤過來，那套用在程式結構上面也就會是如果需要用到內部或外部代碼，那麼就可以利用React Hooks將內部或外部代碼鉤進來，因為所有的鉤子都是引入外部功能，所以我們在命名上會使用use作為開頭，如果你要使用state功能，那麼你的hook就必須命名為useState(駝峰命名法)，你需要什麼功能，就用什麼鉤子，下面介紹一些常用的hooks

• useState()
• useContext()
• useReducer()
• useEffect()

useState()
useState的功用在於為函數組件引入state，因為純函數不能使用state，所以我們把狀態放在hook裡面

import React, { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);

我們可以直接在component 中呼叫 useState Hook，useState 就像是 class 中 this.state 的功能一樣。一般情況下，變數會在 function 結束時「消失」，但 state 會被 React 保留起來。

useContext()

接收一個 context object（React.createContext 的回傳值）並回傳該 context 目前的值。Context 目前的值是取決於由上層 component 距離最近的 <MyContext.Provider> 的 value prop。

如果需要在組件之間共享狀態，可以使用useContext()，而useContext()的參數必須為context object自己。

正確: useContext(MyContext)
錯誤: useContext(MyContext.id)
錯誤: useContext(MyContext.food)

const Navbar = () => {
  const { username } = useContext(AppContext);
  return (
    <div className="navbar">
      <p>AwesomeSite</p>
      <p>{username}</p>
    </div>
  );
}

上面的程式碼中，我們利用useContext hook來引用入context，進而獲取username。

useReducer
因為React 的功能不負責管理狀態功能，所以這方面通常都必須要仰賴外部資料庫，而最常和React搭配的就是Redux，Redux 與像是 React 之類的框架一起運作的特別好，因為它們把 UI 描述成一個 state 的 function，而 Redux 對應 action 來發出 state 更新
const [state, dispatch] = useReducer(reducer, initialState);
上面是useReducer()的基本用法。

useEffect()
Effect Hook 讓你可以使用 function component 中的 side effect也就是副作用，下面是side effect的用法，

useEffect(()  =>  {
  // Async Action
}, [dependencies])

useEffect()接受兩個參數。第一個參數是一個函數，第二個參數是一個數列，一但這個數列發生變化，useEffect()就會執行。

參考連結:
https://zh-hant.reactjs.org/docs/hooks-state.html
https://www.ruanyifeng.com/blog/2019/09/react-hooks.html
https://medium.com/hannah-lin/react-hook-%E7%AD%86%E8%A8%98-usecontext-4bc289976847
https://chentsulin.github.io/redux/docs/basics/UsageWithReact.html